import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import CustomSlider from '@/components/CustomSlider'
import { history, useParams } from 'umi'
import Store from '../store'
import { observer, useLocalObservable } from 'mobx-react'
import PageLoading from '@/components/Global/PageLoading'
import BtnBotLayout from '@/components/BtnBotLayout'
import first_icon from '@/resource/auction/icon_no3.png'
import default_avatar from '@/resource/default_avatar.png'
import { sortNum } from '../const'
import wx from 'weixin-webview-jssdk'

function Exam() {
    const store = useLocalObservable(() => Store)
    const { trainingStatistic, getTrainingsStatistic } = store
    const { id } = useParams<any>()

    const [roleResult, setRoleResult] = useState('2') // 角色结果  1 个人结果 2 拍卖结果

    useEffect(() => {
        document.title = '结果统计'
        getTrainingsStatistic(id)
    }, [])

    const handleChange = () => {
        setRoleResult(roleResult === '1' ? '2' : '1')
    }
    /** 返回 */
    const goBack = () => {
        if (window.__wxjs_environment === 'miniprogram') {
            wx.miniProgram.navigateBack()
        } else {
            history.goBack()
            // history.replace('/training')
        }
    }

    // if (!trainingStatistic?.form_statistic_arr) {
    //     return <PageLoading />
    // }

    return (
        <div className={styles.layout_container}>
            <BtnBotLayout
                footer={
                    <div className={styles.footer}>
                        <div className={styles.white_btn} onClick={handleChange}>
                            {roleResult === '2' ? '查看个人结果' : '查看拍卖结果'}
                        </div>
                        <div className={styles.blue_btn} onClick={goBack}>
                            返回实训系统
                        </div>
                    </div>
                }
            >
                <div className={styles.container}>
                    <div className={styles.wrapper}>
                        <div className={styles.explain}>{roleResult === '1' ? '请各位学员自行评估自己对职业价值的判断：' : '班级职业价值观拍卖数据结果统计；'}</div>
                        {roleResult === '2' &&
                            trainingStatistic?.statistic_arr?.map((item: any, idx: number) => {
                                let { student_rank } = item
                                student_rank = student_rank?.slice()?.sort((a: any, b: any) => a.rank - b.rank)

                                return (
                                    <div key={item.id || idx} className={styles.ques_wrapper}>
                                        <div className={styles.ques_title}>
                                            价值观商品{sortNum[item?.sort]}：{item?.describe}
                                        </div>
                                        <div>
                                            <div className={styles.reward_stage}>
                                                <div className={styles.sliver}>
                                                    <div className={styles.name}>{student_rank?.[1]?.user_name || '--'}</div>
                                                    <img src={student_rank?.[1]?.avatar || default_avatar} />
                                                    <div className={styles.price}>{student_rank?.[1]?.price || '0'}万</div>
                                                </div>
                                                <div className={styles.gold}>
                                                    <div className={styles.name}>{student_rank?.[0]?.user_name || '--'}</div>
                                                    <img src={student_rank?.[0]?.avatar || default_avatar} />
                                                    <div className={styles.price}>
                                                        <img src={first_icon} />
                                                        {student_rank?.[0]?.price || '0'}万
                                                    </div>
                                                </div>
                                                <div className={styles.cropper}>
                                                    <div className={styles.name}>{student_rank?.[2]?.user_name || '--'}</div>
                                                    <img src={student_rank?.[2]?.avatar || default_avatar} />
                                                    <div className={styles.price}>{student_rank?.[2]?.price || '0'}万</div>
                                                </div>
                                            </div>
                                            <div className={styles.box_wrapper_2}>
                                                <div className={styles.box_card}>
                                                    <span>代表价值</span>
                                                    <span>{item?.represent}</span>
                                                </div>
                                                <div className={styles.box_card}>
                                                    <span>参与竞拍人</span>
                                                    <span>{item?.join_num}人</span>
                                                </div>
                                                <div className={styles.box_card}>
                                                    <span>平均竞拍金额</span>
                                                    <span>{item?.join_price_avg}万</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })}
                        {roleResult === '1' &&
                            trainingStatistic?.form_statistic_arr?.map((item: any, idx: number) => {
                                const { statistic } = item
                                const { is_deal } = statistic || {}
                                return (
                                    <div key={item.id || idx} className={styles.ques_wrapper}>
                                        <div className={styles[`deal_${is_deal}`]}>{is_deal === '1' ? '已拍得' : '未拍得'}</div>
                                        <div className={styles.ques_title}>
                                            价值观商品{sortNum[item?.sort]}：{item?.describe}
                                        </div>
                                        <div className={styles.box_wrapper}>
                                            <div className={styles.box_card}>
                                                <span>预算金额</span>
                                                <span>{statistic?.estimate_price || 0}万</span>
                                            </div>
                                            <div className={styles.box_card}>
                                                <span>我拍得的金额</span>
                                                <span style={{ color: '#4E95F2' }}>{statistic?.deal_price || 0}万</span>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })}
                    </div>
                </div>
            </BtnBotLayout>
        </div>
    )
}

export default observer(Exam)
